<script setup>

import {inject, onMounted, ref} from "vue";
import {doForm, doGet, doPost} from "@/util/request.js";
import {showMessage} from "@/util/message.js";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

//刷新页面
const refresh = inject('refresh')
//路由
const router = useRouter()
//条件查询对象
const payProductForm = ref({})
//表单对象
const productTableData = ref([])

//分页
let totalPage = ref(1)
let pageNumber = 1
//分页参数
const onPageChange = (pageNum) => {
  pageNumber = pageNum
  loadProducts(pageNum)
}
//查询产品列表
const loadProducts = (pageNo) => {
  let params = {
    pageNo: pageNo,
    pageSize: 10
  }
  doGet('/product/pageList', params).then(resp => {
    if (resp.data.code === 200) {
      productTableData.value = resp.data.data.list
      totalPage.value = resp.data.data.page.totalPages
    }
  })
}


//添加产品弹窗控制
const centerDialogVisible = ref(false)
const onAddProduct = () => {
  centerDialogVisible.value = true
}
//添加表单验证规则
const payProductRules = {
  productCode: [
    {required: true, message: '请输入产品编码', trigger: 'blur'},
    {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
  ],
  productName: [
    {required: true, message: '请输入产品名称', trigger: 'blur'},
    {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
  ]
}
//添加产品提交数据
const add = () => {
  //表单参数
  const data = {
    productCode: payProductForm.value.productCode,
    productName: payProductForm.value.productName
  }
  doPost('/product/add', data).then(resp => {
    if (resp.data.code === 200) {
      //提示信息
      showMessage('添加产品成功', 'success')
      //等待600毫秒
      setTimeout(() => {
        //关闭弹窗
        centerDialogVisible.value = false
        //刷新列表
        loadProducts(pageNumber)
      }, 600)
    } else {
      //提示信息
      showMessage('添加产品失败: ' + resp.data.msg, 'error')
    }
  })
}
//重置表单
const onProductReset = () => {
  payProductForm.value = {}
}
//查看支付方式
const onShowPayWay = (row) => {
  //跳转
  router.push({
    path: '/index/pay/way/list',
    query: {
      productCode: row.productCode
    }
  })
}
//修改状态
const onEditStatus = (row) => {
  let productCode = row.productCode
  doForm('/product/audit', {productCode}).then(resp => {
    if (resp.data.code === 200) {
      ElMessage.success('修改完成')
      /*loadProducts(pageNumber)*/
      //等待2秒
      setTimeout(() => {
        loadProducts(pageNumber)
      }, 300)
    }
  })
}
//初始化加载数据
onMounted(() => {
  loadProducts(1)
})
</script>

<template>
  <el-button style="margin-left: 20px" type="primary" @click="onAddProduct">新增产品支付</el-button>
  <!------------------------添加产品支付弹窗------------------------------------->
  <el-dialog v-model="centerDialogVisible"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             :show-close="false" :center="true"
             title="新增产品支付"
             width="500" align-center>

    <el-form :rules="payProductRules" :model="payProductForm" ref="payProductRef" label-width="90px" :inline="false">
      <el-form-item label="产品编码:" prop="productCode">
        <el-input v-model="payProductForm.productCode" placeholder="请输入产品编码"/>
      </el-form-item>
      <el-form-item label="产品名称:" prop="productName">
        <el-input v-model="payProductForm.productName" placeholder="请输入产品名称"/>
      </el-form-item>
    </el-form>

    <template #footer>
      <div style="margin-left: 250px">
        <el-button @click="centerDialogVisible = false">返回</el-button>
        <el-button type="info" @click="onProductReset">重置</el-button>
        <el-button type="primary" @click="add">提交</el-button>
      </div>
    </template>

  </el-dialog>
  <!-------------------------------产品列表------------------------------------->
  <el-table
      ref="userTable"
      :data="productTableData"
      border stripe
      style="width: 100%;margin-top: 15px">
    <el-table-column prop="productCode" label="产品编码" align="center"/>
    <el-table-column prop="productName" label="产品名称" align="center"/>
    <el-table-column prop="status" label="状态" align="center"/>
    <el-table-column prop="editTime" label="编辑时间" align="center"/>
    <el-table-column label="操作" align="center">
      <!--编辑&详情&删除按钮-->
      <template #default="scope">
        <el-button size="small" plain type="success" @click="onShowPayWay(scope.row)">查看</el-button>
        <el-button size="small" plain type="danger" @click="onEditStatus(scope.row)">
          {{ scope.row.status === '启用' ? '禁用' : '启用' }}
        </el-button>

      </template>
    </el-table-column>
  </el-table>
  <!---------------------------------分页--------------------------------------->
  <el-pagination
      background
      size="small"
      layout="prev, pager, next"
      :page-count="totalPage"
      :page-size="20"
      style="margin-top: 15px"
      @current-change="onPageChange"/>
  <!---------------------------------分页--------------------------------------->
</template>

<style scoped>

</style>